<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="../css/css-demo1.css" />
    <title>Document</title>
    <style>
      /* 全屏样式设置 */
      div:fullscreen {
        background: red;
      }
    </style>
  </head>
  <body>
    <div>
      <div id="myVideo">ffff</div>
      <button id="goFullscreen">全屏</button>
    </div>

    <div class="box">&nbsp;</div>
    <div class="box">这是⼀些⽂本。</div>
    <div class="box"><!-- 注释 --></div>
    <div><p class="exclude">1111</p></div>
    <p>2222</p>
    <h1>1</h1>
    <h2>2</h2>
    <h3>3</h3>
    <p id="pra">pra</p>
    <p class="special">p</p>
    <ul>
      <li>第⼀项（将显示为蓝⾊）</li>
      <li>第⼆项</li>
      <li>第三项</li>
      <li>第四项</li>
      <li>第五项</li>
    </ul>
    <ul>
      <li>test</li>
    </ul>
    <table>
      <tr>
        <td>第⼀⾏第⼀列（将显示为粗体）</td>
        <td>第⼀⾏第⼆列（将显示为粗体）</td>
      </tr>
      <tr>
        <td>第⼆⾏第⼀列</td>
        <td>第⼆⾏第⼆列</td>
      </tr>
    </table>
    <section>
      <h3>《静夜思》</h3>
      <small class="content-item">【唐】李⽩</small>
      <div>床前明⽉光，</div>
      <div class="content-item">疑是地上霜。</div>
      <p class="content-item">举头望明⽉，</p>
      <p>低头思故乡。</p>
    </section>

    <div>
      <input type="text" required />
      <input type="text" readonly />
      <input type="text" disabled value="hopo" />
      <input type="checkbox" id="check1" checked />
      <label for="check1">选项⼀</label>
      <input type="checkbox" id="check2" /><label for="check2">选项⼆</label>
      <input type="email" required placeholder="请输⼊邮箱" />
    </div>
    <div>
      <input type="number" min="1" max="10" value="5" />
      <input type="date" min="2023-01-01" max="2023-12-31" />
    </div>
  </body>
  <script>
    document
      .getElementById("goFullscreen")
      .addEventListener("click", function () {
        var video = document.getElementById("myVideo");
        if (video.requestFullscreen) {
          video.requestFullscreen();
        } else if (video.mozRequestFullScreen) {
          /* Firefox */
          video.mozRequestFullScreen();
        } else if (video.webkitRequestFullscreen) {
          /* Chrome, Safari & Opera */
          video.webkitRequestFullscreen();
        } else if (video.msRequestFullscreen) {
          /* IE/Edge */
          video.msRequestFullscreen();
        }
      });
  </script>
</html>
